<template>
  <div class="base-content">
    <div>
      <FormComp :formItems="formItems"></FormComp>
    </div>
    <div
      class="toolbar"
      v-if="slotToolbar"
    >
      <slot name="toolbar"></slot>
    </div>
    <div style="height: 250px">
      <TableComp
      ref="tableRef"
        :tableCols="props.tableCols"
        :tableData="tableData"
      >
        <template #oper="scope">
          <el-button
            type="primary"
            size="small"
            @click="test(scope)"
          >
            test
          </el-button>
        </template>
      </TableComp>
    </div>
  </div>
</template>
<script setup lang="ts">
import TableComp from '@/components/TableComp.vue'
import FormComp from '@/components/FormComp.vue'
import TableColumnModel from '@/model/TableColumnModel'
import FormItemModel from '@/model/FormItemModel'
import { ref, useSlots, computed, onMounted,PropType, Ref } from 'vue'
import FormItemTypeEnum from '@/model/enums/FormItemTypeEnum'
import { getTableData } from '@/api/TestApi'

const props = defineProps({
  tableCols: {
    type: Array as PropType<Array<TableColumnModel>>,
    required: true,
    default: (): Array<TableColumnModel> => [],
    validator: function (value: Array<any>) {
      if (value && value.length > 0) {
        const f = value.every((item) => item instanceof TableColumnModel)
        if (!f) console.warn('tableCols参数格式不对！必须是Array<TableColumnModel>类型')
        return f
      }
      console.warn('tableCols是必须的')
      return false
    },
  },
})
const slotToolbar = computed(() => !!useSlots().toolbar)
let tableData = ref([])
const formItems: FormItemModel[] = [
  new FormItemModel({ prop: 'test', label: '测试' }),
  new FormItemModel({ prop: 'testtextArea', label: '测试', type: FormItemTypeEnum.textArea }),
  // new FormItemModel({
  //   prop: 'testselect',
  //   label: '测试',
  //   type: FormItemTypeEnum.select,
  //   options: [
  //     { label: '1', value: '1' },
  //     { label: '2', value: '2' },
  //   ],
  // }),
]
const tableRef: Ref<any> = ref(null)
const getSelection = () => {
  return tableRef.value.multipleSelection
}
const test = (scope: any) => {
  console.log(scope.row.name)
}
const query = () => {
  getTableData().then((res: any) => {
    tableData.value = res.data
  })
}
onMounted(() => {
  query()
})
</script>
<style scoped>
.toolbar {
  margin-bottom: 1em;
}
</style>
